import { Button, Grid, IndexBar, List, SearchBar } from "antd-mobile";
import React, { useEffect, useState } from "react";
import axios from "../../utils/index";

import { useDispatch } from "react-redux";
import { setCtyl } from "../../store/cont/cont";
import { useNavigate } from "react-router-dom";
function Index() {
  const [list, setlist] = useState([]);
  const [data, setData] = useState([]);
  const [isCliedssd,setisCliedssd]=useState(false)
  const dispatch=useDispatch()
  const naviagte=useNavigate()
  const getData = async () => {
    const resp = await axios.get("/city");
    console.log(resp);
    setlist(resp.data.data);
  };
  const diand=(value)=>{
    dispatch(setCtyl(value))
    naviagte(-1)
  }

  useEffect(() => {
    getData();
  }, []);
  const onSearch = async (value) => {
      const pagc = await axios.get("/city/search",{params:{wd:value}});
      console.log(pagc);
      setData(pagc.data.data);
      setisCliedssd(true)
      setQwe(qwe.concat(value))
  };
  //历史记录
  const [qwe,setQwe]=useState(JSON.parse(localStorage.getItem('qwe'))||[])
  useEffect(()=>{
    localStorage.setItem('qwe',JSON.stringify(qwe))
  },[qwe])
  return (
    <div>
      <SearchBar placeholder="请输入内容" onSearch={onSearch} onClear={()=>setisCliedssd(false)}/>
    {
      isCliedssd? <div>
        {
          data.map((v,i)=>{
            return (
              <button key={i} onClick={()=>diand(v.name)}>{v.name}</button>
            )
          })
        }
      </div>:<div><div>
      <div>
        <h2>历史记录</h2>
        {
          qwe.map((v,i)=>{
            return (
              <Button key={i}>{v}</Button>
            )
          })
        }
       

      </div>
      <div>
        <h2>热门城市</h2>
        <Grid columns={4} gap={8}>
          {list.hotCities?.map((v, i) => {
            return(
            <Grid.Item key={i}>
              <div onClick={()=>diand(v.name)}>{v.name}</div>
            </Grid.Item>
            )
          })}
        </Grid>
        <IndexBar style={{ height: "100vh" }}>
          {list.cityList?.map((group) => {
            const { title, citys } = group;
            return (
              <IndexBar.Panel
                index={title}
                title={`标题${title}`}
                key={`标题${title}`}
              >
                <List>
                  {citys.map((item, index) => (
                    <List.Item onClick={()=>diand(item.name)} key={index}>{item.name}</List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            );
          })}
        </IndexBar>
      </div>
    </div></div>
    }
      
    </div>
  );
}

export default Index;
